<template>
  <div>
    <mt-swipe :auto="3000">
      <mt-swipe-item v-for="(item, index) in imgUrl" :key="index">
        <img :src="item.img">
      </mt-swipe-item>
    </mt-swipe>
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-4 col-sm-3">
          <router-link to="" class="nav-item">
            <img src="../assets/menu1.png">
            <p>新闻资讯</p>
          </router-link>
        </div>
        <div class="col-xs-4 col-sm-3">
          <router-link to="" class="nav-item">
            <img src="../assets/menu2.png">
            <p>图片分享</p>
          </router-link>
        </div>
        <div class="col-xs-4 col-sm-3">
          <router-link to="" class="nav-item">
            <img src="../assets/menu3.png">
            <p>商品购买</p>
          </router-link>
        </div>
        <div class="col-xs-4 col-sm-3">
          <router-link to="" class="nav-item">
            <img src="../assets/menu4.png">
            <p>留言反馈</p>
          </router-link>
        </div>
        <div class="col-xs-4 col-sm-3">
          <router-link to="" class="nav-item">
            <img src="../assets/menu5.png">
            <p>视频专区</p>
          </router-link>
        </div>
        <div class="col-xs-4 col-sm-3">
          <router-link to="" class="nav-item">
            <img src="../assets/menu6.png">
            <p>联系我们</p>
          </router-link>
        </div>
      </div>
    </div>
    <div class="qianming text-center">
        <p>wzq</p>
    </div>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        imgUrl:[]
      }
    },
    created() {
      this.$http.get('http://localhost:5000/api/getlunbo').then(res => {
        this.imgUrl = res.body.message
      })
    }
  }
</script>

<style>
  .mint-swipe {
    height: 233px;
  }
  .mint-swipe img {
    width: 100%;
  }
  .nav-item {
    display: block;
    width: 80%;
    margin: 10px auto;
  }
  .nav-item img {
    width: 100%;
  }
  .nav-item p {
    text-align: center;
    margin: 10px;
    color: #333;
  }
  .qianming {
    font-family: "Againts";
    font-size: 220px;
    line-height: 275px;
  }
</style>
